<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.将vue.js引入 -->
    <script src="./js/vue.js"></script>
</head>

<body>
    <div class="app">
        <!-- v-on:事件类型="业务逻辑 || 函数名" -->
        <!-- 后面跟函数名 -->
        <button v-on:click="doThis">按钮1</button>
        <!-- 具体的业务逻辑 -->
        <button v-on:click="msg = 456">按钮2</button>{{msg}}
        <!-- 不会进行弹框,将alert解析为一个函数名 -->
        <button v-on:click="alert('789')">按钮3</button>
        <!-- 点击事件onclick -->
        <button onclick="alert('789')">按钮4</button>
        <hr>
        {{num}}
        <button v-on:click="add3">按钮+100</button>

    </div>

    <script>
        const vm = new Vue({
            el: '.app',
            data: {
                msg: 123,
                num: 10
            },
            methods: {
                // methods节点中是来定义各个函数的
                doThis: function () {
                    alert("嘿嘿嘿")
                },
                add3(evevt) {
                    var res = event.target.innerHTML
                    console.log(res);

                    console.log(res.substring(event.target.innerHTML.indexOf('+') + 1));
                    this.num += (res.substring(res.indexOf('+') + 1) - 0)
                }
            }
        })
    </script>
</body>

</html>